<template>
	<div class="section honorsBg" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
		@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
		:style=" 'height:' +sectionHeight + 'px;' ">

		<el-row :gutter="24" type="flex" class="newsTitleArea">
			<el-col :gutter="24" class="newsTitle">
				<div class="title_cn">{{Culture.subjectChinese}}
				</div>
				<div class="title_en">{{Culture.subjectEnglish}}</div>
				<div class="title_flag"></div>
			</el-col>
		</el-row>
		<el-row :gutter="24" type="flex" class="corporateVisionArea">
			<el-col :gutter="24" class="corporateVision">
				<div class="corporateVisionFlag"></div>
				<div class="corporateVisionText">{{Culture.titleOne}}</div>
				<div class="corporateVisionContent"> {{Culture.contentOne}}</div>
			</el-col>
		</el-row>
		<el-row :gutter="24" type="flex" class="corporateValuesArea">
			<el-col :gutter="24" class="corporateValues">
				<div class="corporateValuesFlag"></div>
				<div class="corporateValuesText">{{Culture.titleTwo}}</div>
				<div class="corporateValuesContent">{{Culture.contentTwo}} </div>
			</el-col>

		</el-row>
		<el-row :gutter="24" type="flex" class="corporatePurposeArea">
			<el-col :gutter="24" class="corporatePurpose">
				<div class="corporatePurposeFlag"></div>
				<div class="corporatePurposeText">{{Culture.titleThree}}</div>
				<div class="corporatePurposeContent">{{Culture.contentThree}} </div>
			</el-col>

		</el-row>
		<el-row :gutter="24" type="flex" class="honorsContentArea">
			<div class="swiper-container" ref="honorsContentArea" id="honorsContentArea">
				<div class="swiper-wrapper">
					<div v-for="(item, index) in slides" :key="index" class="swiper-slide"
						@click="goToHonorsDetail(item.id)">
						<div class="honorsImgArea" style="">
							<img :src="$request.getImgUrl()+item.coverImage" alt="Slide" :title="item.title"
								class="swiper-lazy animation honorsImg" style="" />
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</el-row>
	</div>
</template>

<script>
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		name: 'Honors',
		props: {
			sectionHeight: Number
		},
		components: {},
		created() {
			this.bindEnterpriseHonor().then(data => {
				this.initBannerSwiper();
			});
		},
		mounted() {
			//this.initBannerSwiper();
			this.getCultureHome();
		},
		data() {
			return {
				honorsSwiper: null, // Swiper实例
				slides: [],
				Culture: []
			}
		},
		methods: {
			/**
			 * 绑定首页-(3)	
			 */
			bindEnterpriseHonor() {
				return new Promise((resolve, reject) => {
					let params = {};
					let that = this;
					that.$request.getEnterpriseHonor(params).then(res => {
						that.slides = res.data;
						resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			/**
			 * 绑定首页文化	
			 */
			getCultureHome() {
				return new Promise((resolve, reject) => {
					let params = {};
					let that = this;
					that.$request.getCultureHome(params).then(res => {
						that.Culture = res.data;
						resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			initBannerSwiper() {
				let that = this;
				this.honorsSwiper = new Swiper('.honorsContentArea .swiper-container', {
					slidesPerView: (window.innerWidth < 1024) ? 2 : 4,
					spaceBetween: 10,
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
					autoplay: {
						delay: 2000,
					},
				});
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------开始----------*/
			handleMouseDown(event) {
				this.startY = event.clientY;
				this.deltaY = 0;
				this.isDragging = true;
			},
			handleMouseMove(event) {
				if (this.isDragging) {
					const currentY = event.clientY;
					this.deltaY = currentY - this.startY;
				}
			},
			handleMouseUp() {
				if (Math.abs(this.deltaY) > 30) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
				this.isDragging = false;
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------结束----------*/
			/*-----------------------------处理----手指上下滑动--------------------开始----------*/
			handleTouchStart(event) {
				this.startY = event.touches[0].clientY;
				this.deltaY = 0;
			},
			handleTouchMove(event) {
				const currentY = event.touches[0].clientY;
				this.deltaY = currentY - this.startY;
			},
			handleTouchEnd() {
				if (Math.abs(this.deltaY) > 10) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
			},
			//////跳转详情页面
			goToHonorsDetail(id) {
				this.$router.push({
					name: this.$t("corporateHonorInfo"),
					query: {
						id: id,
					}
				});
			},
		},
		beforeDestroy() {

		},
		watch: {

		}
	};
</script>

<style scoped>
	/* 企业实时新闻 */
	.honorsBg {
		width: 100%;
		height: 100%;
		background: url("../../assets/img/bg_home_honors.jpg") no-repeat;
		background-size: cover;
		background-position: center;
		cursor: pointer;
		padding-top: 0px;
		/* background-color: #5887e5; */
	}

	.newsTitleArea {
		width: 70%;
		height: 8vh;
		margin-top: 15px;
	}

	.newsTitle {
		display: flex;
		flex-direction: column;
		text-align: center;
		border-bottom: 1px solid #FFF;
		color: #FFF;
		position: relative;
	}

	.title_cn {
		font-size: 1.5em;
		font-weight: bold;
		padding-left: 10px;
		height: 30px;
		line-height: 30px;
	}

	.title_en {
		font-size: 1em;
		font-style: italic;
		height: 30px;
		line-height: 30px;
		padding-left: 10px;
	}

	.title_flag {
		height: 6px;
		width: 100px;
		background-color: #0484D7;
		position: absolute;
		bottom: -3px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.newsDetile {
		justify-content: center;
		text-align: center;
		position: relative;
	}

	.detileBtn {
		height: 30px;
		line-height: 30px;
		width: 100px;
		border-radius: 5px;
		background-color: #0484D7;
		color: #FFF;
		text-align: center;
		font-size: 0.9em;
		/* margin-top: 10px; */
		position: absolute;
		right: 0px;
		top: 10px;
	}

	/* ------------------------------- */
	.corporateVisionArea,
	.corporateValuesArea,
	.corporatePurposeArea {
		position: relative;
		padding-top: 30px;
		margin-top: 20px;
		display: flex;
		flex-direction: column;
	}

	.corporateVisionFlag,
	.corporateValuesFlag,
	.corporatePurposeFlag {
		height: 30px;
		width: 30px;
		position: absolute;
		/* 居中显示 */
		left: 50%;
		transform: translateX(-50%);
		top: 5px;
	}

	.corporateVisionFlag {
		background: url("../../assets/icons/icon_honors_vision.png") no-repeat;
		background-position: center;
		background-size: 30px 30px;
	}

	.corporateValuesFlag {
		background: url("../../assets/icons/icon_honors_value.png") no-repeat;
		background-position: center;
		background-size: 30px 30px;
	}

	.corporatePurposeFlag {
		background: url("../../assets/icons/icon_honors_purpose.png") no-repeat;
		background-position: center;
		background-size: 30px 30px;
	}

	.corporateVisionText,
	.corporateValuesText,
	.corporatePurposeText {
		text-align: center;
		font-weight: 400;
		font-size: 1.3em;
		color: #FFF;
		margin: 5px 0px;
	}

	.corporateVisionContent,
	.corporateValuesContent,
	.corporatePurposeContent {
		text-align: center;
		font-weight: 400;
		color: #F4F8FD;
		font-size: 0.9em;
		opacity: 0.6;
	}

	/* ------------------------------------------------ */
	.honorsContentArea {
		width: 70%;
		height: 25vh;
		margin-top: 6vh;
	}

	.honorsImgArea {
		overflow: hidden;
		padding: 10px;
		transition: transform 1s ease;
	}

	.honorsImg {
		width: 100%;
		height: 24vh;
		border-radius: 10px;
	}

	.honorsContentArea .slide-content img {
		height: 200px;
	}

	.honorsContentArea .swiper-button-prev {
		left: -60px;
		z-index: 9999999;
		top: 60%;
		background: url("../../assets/icons/icon_left_arrow_white.png");
		background-size: 45px;
	}

	.honorsContentArea .swiper-button-next {
		right: -60px;
		z-index: 9999999;
		top: 60%;
		background: url("../../assets/icons/icon_right_arrow_white.png");
		background-size: 45px;
	}

	.honorsContentArea .el-image__inner {
		height: 24vh;
		object-fit: cover;
	}

	.honorsContentArea .swiper {
		position: relative;
		width: 100%;
	}

	.honorsContentArea .swiper-container {
		overflow: hidden;
	}

	.honorsContentArea .swiper-slide {
		width: 25%;
		text-align: center;
	}

	.honorsContentArea img:hover {
		/* transform: scale(0.98) */
	}

	@media (min-width:2560px) {
		.honorsContentArea {
			width: calc(2560px * 0.7);
			height: 292px;
			margin-top: 6vh;
		}

		.honorsImgArea {
			overflow: hidden;
			padding: 10px;
			transition: transform 1s ease;
			width: calc((2560px / 1920 * 1920 * 0.7) / 4) !important;
			height: 100% !important;
		}

		.honorsContentArea .swiper-slide {
			width: calc((2560px / 1920 * 1920 * 0.7 - 40px) / 4) !important;
			height: 100% !important;
			text-align: center;
		}

		.honorsImg {
			width: calc((2560px / 1920 * 1920 * 0.7 - 80px) / 4) !important;
			height: calc((2560px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540) !important;
			border-radius: 10px;
			margin-top: calc((292px - ((2560px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540))/2);
		}
	}

	@media (max-width:2560px) {
		.honorsContentArea {
			width: calc(2560px * 0.7);
			height: 292px;
			margin-top: 6vh;
		}

		.honorsImgArea {
			overflow: hidden;
			padding: 10px;
			transition: transform 1s ease;
			width: calc((2560px / 1920 * 1920 * 0.7) / 4) !important;
			height: 100% !important;
		}

		.honorsContentArea .swiper-slide {
			width: calc((2560px / 1920 * 1920 * 0.7 - 40px) / 4) !important;
			height: 100% !important;
			text-align: center;
		}

		.honorsImg {
			width: calc((2560px / 1920 * 1920 * 0.7 - 80px) / 4) !important;
			height: calc((2560px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540) !important;
			border-radius: 10px;
			margin-top: calc((292px - ((2560px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540))/2);
		}
	}

	@media (max-width:2320px) {
		.honorsContentArea {
			width: calc(2320px * 0.7);
			height: 264px;
			margin-top: 6vh;
		}

		.honorsImgArea {
			overflow: hidden;
			padding: 10px;
			transition: transform 1s ease;
			width: calc((2320px / 1920 * 1920 * 0.7) / 4) !important;
			height: 100% !important;
		}

		.honorsContentArea .swiper-slide {
			width: calc((2320px / 1920 * 1920 * 0.7 - 40px) / 4) !important;
			height: 100% !important;
			text-align: center;
		}

		.honorsImg {
			width: calc((2320px / 1920 * 1920 * 0.7 - 80px) / 4) !important;
			height: calc((2320px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540) !important;
			border-radius: 10px;
			margin-top: calc((264px - ((2320px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540))/2);
		}
	}

	@media (max-width:2120px) {
		.honorsContentArea {
			width: calc(2120px * 0.7);
			height: 250px;
			margin-top: 6vh;
		}

		.honorsImgArea {
			overflow: hidden;
			padding: 10px;
			transition: transform 1s ease;
			width: calc((2120px / 1920 * 1920 * 0.7) / 4) !important;
			height: 100% !important;
		}

		.honorsContentArea .swiper-slide {
			width: calc((2120px / 1920 * 1920 * 0.7 - 40px) / 4) !important;
			height: 100% !important;
			text-align: center;
		}

		.honorsImg {
			width: calc((2120px / 1920 * 1920 * 0.7 - 80px) / 4) !important;
			height: calc((2120px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540) !important;
			border-radius: 10px;
			margin-top: calc((250px - ((2120px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540))/2);
		}
	}

	@media (max-width:1920px) {
		.honorsContentArea {
			width: calc(1920px * 0.7);
			height: 250px;
			margin-top: 6vh;
		}

		.honorsImgArea {
			overflow: hidden;
			padding: 10px;
			transition: transform 1s ease;
			width: calc((1920px / 1920 * 1920 * 0.7) / 4) !important;
			height: 100% !important;
		}

		.honorsContentArea .swiper-slide {
			width: calc((1920px / 1920 * 1920 * 0.7  - 40px) / 4) !important;
			height: 100% !important;
			text-align: center;
		}

		.honorsImg {
			width: calc((1920px / 1920 * 1920 * 0.7 - 80px) / 4) !important;
			height: calc((1920px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540) !important;
			border-radius: 10px;
			margin-top: calc((250px - ((1920px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540))/2);
		}
	}

	@media (max-width:1720px) {
		.honorsContentArea {
			width: calc(1720px * 0.7);
			height: 250px;
			margin-top: 6vh;
		}

		.honorsImgArea {
			overflow: hidden;
			padding: 10px;
			transition: transform 1s ease;
			width: calc((1720px / 1920 * 1920 * 0.7) / 4) !important;
			height: 100% !important;
		}

		.honorsContentArea .swiper-slide {
			width: calc((1720px / 1920 * 1920 * 0.7 - 40px) / 4) !important;
			height: 100% !important;
			text-align: center;
		}

		.honorsImg {
			width: calc((1720px / 1920 * 1920 * 0.7 - 80px) / 4) !important;
			height: calc((1720px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540) !important;
			border-radius: 10px;
			margin-top: calc((250px - ((1720px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540))/2);
		}
	}

	@media (max-width:1520px) {
		.title_cn{
			font-size:22px;
		}
		.title_en{
			font-size:18px;
		}
		.corporateVisionText{
			font-size:22px;
		}
		.corporateVisionContent{
			/* font-size:18px; */
		}
		.honorsContentArea {
			width: calc(1520px * 0.7);
			height: 250px;
			margin-top: 6vh;
		}

		.honorsImgArea {
			overflow: hidden;
			padding: 10px;
			transition: transform 1s ease;
			width: calc((1520px / 1920 * 1920 * 0.7) / 4) !important;
			height: 100% !important;
		}

		.honorsContentArea .swiper-slide {
			width: calc((1520px / 1920 * 1920 * 0.7 - 40px) / 4) !important;
			height: 100% !important;
			text-align: center;
		}

		.honorsImg {
			width: calc((1520px / 1920 * 1920 * 0.7 - 80px) / 4) !important;
			height: calc((1520px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540) !important;
			border-radius: 10px;
			margin-top: calc((250px - ((1520px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540))/2);
		}
	}

	@media (max-width:1366px) {
		.title_cn{
			font-size:20px;
		}
		.title_en{
			font-size:16px;
		}
		.corporateVisionText{
			font-size:20px;
		}
		.corporateVisionContent{
			/* font-size:16px; */
		}
		.honorsContentArea {
			margin-top: 0;
		}

		.honorsContentArea {
			width: calc(1366px * 0.7);
			height: 250px;
			margin-top: 6vh;
		}

		.honorsImgArea {
			overflow: hidden;
			padding: 10px;
			transition: transform 1s ease;
			width: calc((1366px / 1920 * 1920 * 0.7) / 4) !important;
			height: 100% !important;
		}

		.honorsContentArea .swiper-slide {
			width: calc((1366px / 1920 * 1920 * 0.7 - 40px) / 4) !important;
			height: 100% !important;
			text-align: center;
		}

		.honorsImg {
			width: calc((1366px / 1920 * 1920 * 0.7 - 80px) / 4) !important;
			height: calc((1366px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540) !important;
			border-radius: 10px;
			margin-top: calc((250px - ((1366px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540))/2);
		}
	}

	@media (max-width:1120px) {
		.title_cn{
			font-size:18px;
		}
		.title_en{
			font-size:14px;
		}
		.corporateVisionText{
			font-size:18px;
		}
		.corporateVisionContent{
			/* font-size:14px; */
		}
		.honorsContentArea {
			width: calc(1120px * 0.7);
			height: 250px;
			margin-top: 6vh;
		}

		.honorsImgArea {
			overflow: hidden;
			padding: 10px;
			transition: transform 1s ease;
			width: calc((1120px / 1920 * 1920 * 0.7) / 4) !important;
			height: 100% !important;
		}

		.honorsContentArea .swiper-slide {
			width: calc((1120px / 1920 * 1920 * 0.7 - 40px) / 4) !important;
			height: 100% !important;
			text-align: center;
		}

		.honorsImg {
			width: calc((1120px / 1920 * 1920 * 0.7 - 80px) / 4) !important;
			height: calc((1120px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540) !important;
			border-radius: 10px;
			margin-top: calc((250px - ((1120px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540))/2);
		}
	}

	@media (max-width:1024px) {
		.title_cn{
			font-size:18px
		}
		.title_en{
			font-size:14px
		}
		.corporateVisionText{
			font-size:18px
		}
		.corporateVisionContent{
			/* font-size:14px */
		}
		.home .swiper-container {
			width: calc(1024px * 0.7);
		}

		.honorsContentArea {
			width: calc(1024px * 0.7);
			height: 210px;
			margin-top: 0px;
		}

		.honorsImgArea {
			overflow: hidden;
			padding: 10px;
			transition: transform 1s ease;
			width: calc((1024px / 1920 * 1920 * 0.7) / 4) !important;
			height: 100% !important;
		}

		.honorsContentArea .swiper-slide {
			width: calc((1024px / 1920 * 1920 * 0.7 - 40px) / 4) !important;
			height: 100% !important;
			text-align: center;
		}

		.honorsImg {
			width: calc((1024px / 1920 * 1920 * 0.7 - 80px) / 4) !important;
			height: calc((1024px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540) !important;
			border-radius: 10px;
			margin-top: calc((210px - ((1024px / 1920 * 1920 * 0.7 - 80px) / 4 * 350 / 540))/2);
		}
		.honorsContentArea .swiper-button-prev,		
		.honorsContentArea .swiper-button-next {
			top: 63%;
		}
	}
</style>
